<template>
  <div class="asetting_content cf w1 h1">
    <nav class="asetting_c-left fl">
      <Menu class="asetting-l-nav"
        style="width:100%;"
        @on-select="onChangeRoue"
        :active-name="activeName">
        <MenuItem name="/video/device">
        <i class="fa fa-window-restore"></i>
        <span>设备管理</span>
        </MenuItem>
        <MenuItem name="/video/alarm">
        <i class="fa fa-bullhorn"></i>
        <span>报警事件</span>
        </MenuItem>
        <MenuItem name="/video/params">
        <i class="fa fa-newspaper-o"></i>
        <span>参数设置</span>
        </MenuItem>
      </Menu>
    </nav>
    <div class="asetting_c-right fr">
      <transition name="fade-transverse">
        <router-view />
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    activeName() {
      const { path } = this.$route
      if (path.startsWith('/video/device')) {
        return '/video/device'
      }
      if (path.startsWith('/video/alarm')) {
        return '/video/alarm'
      }
      if (path.startsWith('/video/params')) {
        return '/video/params'
      }
    }
  },
  methods: {
    onChangeRoue(path) {
      this.$router.push({ path })
    }
  }
}
</script>
